<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				年审范围
				<a-icon @click="closeFunction" :style="{ fontSize: '20px', float: 'right', margin: '10px' }"
					type="close-circle" />
			</p>
			<div class="main">
				<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" @submit="handleSubmit">
					<a-form-item label="学生组织" v-if="JSON.stringify(text) == '{}'">
						<a-select @change="SelectChange" showSearch mode="multiple" allowClear :allowClear="true" v-decorator="['ClubID']" placeholder="请选择学生组织"
							optionFilterProp="children">
							<a-select-option v-for="(item, index) in DepartCodeList" :key="index" :value="item.ID">
								{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item>

					<a-form-item label="学生组织" v-else>
						<a-select showSearch :allowClear="true" v-decorator="['ClubID']" placeholder="请选择学生组织"
							optionFilterProp="children">
							<a-select-option v-for="(item, index) in DepartCodeList" :key="index" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }">
						<a-button type="primary" html-type="submit">提交</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import {
		DoAddActivityMember,
		GetClubPageListCommon,
		GetUserList,
		GetDepartList,
		ManageClubAnnualAuditRangeDoAdd,
		ManageClubAnnualAuditRangeDoUpdate,
		GetClassList,
		CommonDoGetClubList
	} from '@/api/follow';
	const data = [];
	export default {
		props: {
			text: Object,
		},
		watch: {
			// time: {
			// 	handler(text) {},
			// 	immediate: true
			// },
			text: function(text) {
				if (JSON.stringify(text) == '{}') {} else {
					this.fetchClub(text.ClassName)
					this.fetchClubs(text.ClubName)
					this.form.setFieldsValue({
						ClubID: text.ClubID,
					})
				}
			}

		},
		data() {
			return {
				treeData: [{
					ID: '0',
					Name: '全选',
					title: 'Node2',
					value: '0-1',
					children: [],
				}],
				DepartCodeList: [],
				ClassList: [],
				Type: "1",
				data,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				// DepartCodeList:[],
				fetching: false,
				ClubList: [],
				userList: [],
				allscelt:[],
				isopen: false, //为定义的日历弹出的状态 false表示隐藏
				Year: null, //用于接收年
			};
		},
		created() {
			this.form.setFieldsValue({
				Year: null,
			})
			this.getOtherList()
		},
		methods: {
			SelectChange(e){
				console.log(e)
				console.log(this.form.getFieldValue('ClubID'))
				let that=this;
				if(e.indexOf('allID')>-1){
					this.$nextTick(() => {
						setTimeout(function() {
							that.form.setFieldsValue({
								ClubID:that.allscelt
							});
						}, 300);
					})
				}else{
					this.$nextTick(() => {
						setTimeout(function() {
							that.form.setFieldsValue({
								ClubID:e
							});
						}, 300);
					})
				}
				
			},
			async getOtherList() {
				let res1 = await CommonDoGetClubList();
				this.DepartCodeList = res1.data.data;
				this.DepartCodeList.unshift({
					ID:'allID',
					Name:'全选'
				})
				this.allscelt=this.DepartCodeList.map(item=>{
					return item.ID
				})
				console.log(this.allscelt)
				console.log(this.DepartCodeList)
			},
			async fetchClubs(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value) {
					let data = {};
					data.key = value;
					data.state = 2;
					let res = await GetClubPageListCommon(data);
					this.ClubList = res.data.data;
				}
			},
			onChange() {
				this.createValue = null;
				This.Year = null;
			},
			handYearChange(open) {
				if (open) {
					this.isopen = true
				} else {
					this.isopen = false
				}
			},
			panelYearChange(value) {
				this.createValue = value;
				this.Year = moment(value).format('YYYY'); //接收panelChange返回的值 并用monent格式化时间为年
				this.form.setFieldsValue({
					Year: this.Year,
				})
				console.log(this.Year)
				this.isopen = false;
			},
			async fetchClub(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value && myReg.test(value)) {
					let data = {};
					data.key = value;
					let res = await GetClassList(data);
					this.ClassList = res.data.data;
				}
			},
			selectChange(e) {
				console.log(e);
			},
			disabledDate(time) {
				// return time.getFullYear() < "1990"
			},

			radioChange(e) {
				this.Type = e.target.value
			},

			moment,
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			async fetchUser(value) {
				this.fetching = true;
				let myReg = /^[^a-zA-Z]+$/;
				if (value && myReg.test(value) && value.length > 3) {
					let data = {};
					data.key = value;
					data.top = 20;
					let res = await GetUserList(data);
					this.fetching = false;
					this.userList = res.data.data;
				}
			},
			closeFunction(data) {
				this.form.resetFields();
				this.$emit('closeFun', data);
			},
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						console.log(values);
						let data = {}
						data = values
						data.ClubAnnualAuditID = this.$route.query.ID
						if(data.ClubID.indexOf('allID')>-1){
							data.ClubID.splice(data.ClubID.indexOf('allID'),1)	
						}
						console.log(data.ClubID.indexOf('allID'));
						console.log(data.ClubID);
						
						let res = {}
						if (JSON.stringify(this.text) == '{}') {
							data.ClubID = data.ClubID.join(',')
							res = await ManageClubAnnualAuditRangeDoAdd(data);
						} else {
							data.ID = this.text.ID
							res = await ManageClubAnnualAuditRangeDoUpdate(data);
						}
						this.$message.success(res.data.msg)
						if (res.data.code == 0) {
							this.$emit('closeFun', 1);
							this.closeFunction(1)
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: absolute;
		width: 600px;
		height: 540px;
		background: #fff;
		left: 50%;
		margin-left: -300px;
		top: 50%;
		margin-top: -270px;
		overflow-y: auto;
	}

	.main {
		height: 90%;
		overflow-y: scroll;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
	}

	/deep/.ant-form-item-label {
		width: 100px !important;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker,
	/deep/.ant-time-picker {
		width: 100% !important;
	}

	.fixed-top {
		width: inherit;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
		padding: 10px 0 0 10px;
	}

	.fixed-bottom {
		width: 164px;
		left: 50%;
		bottom: 0px;
		margin: 0px 0px 0px -82px !important;
		position: absolute;
		background-color: white;
		z-index: 999;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}
</style>
